<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition  xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:c="http://java.sun.com/jsp/jstl/core"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:p="http://primefaces.prime.com.tr/ui"
                 template="./../template/WorkspaceTemplate.xhtml">

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">

    </ui:define>

    <ui:define name="right">

    </ui:define>

    <ui:define name="content">
        <h:form style="font-size: 85%">
            <p:panel header="Select Time Period">
                <h:panelGrid columns="3">
                    <h:outputLabel value="Filtered by period: "/>
                    <h:selectOneMenu value="#{salesFiguireManagerBean.selectedPeriod}">
                        <f:selectItems value="#{salesFiguireManagerBean.periods}" var="item" itemLabel="#{item}"
                                       itemValue="#{item}"/>
                    </h:selectOneMenu>
                    <p:commandButton value="Filter" ajax="false" action="#{salesFiguireManagerBean.chooseAnotherPeriod}"/>
                </h:panelGrid>
            </p:panel>
        </h:form>

        <p:panel header="Quantity of Bases:" style="font-size: 85%">
            <h:form>
                <p:dataTable var="cell" value="#{salesFiguireManagerBean.getFigures(salesFiguireManagerBean.selectedPeriod)}">
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="#{salesFiguireManagerBean.labelLine.col1}"/>
                        </f:facet>
                        <h:outputText value="#{cell.col1}"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="#{salesFiguireManagerBean.labelLine.col2}"/>
                        </f:facet>
                        <h:outputText value="#{cell.col2}"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="#{salesFiguireManagerBean.labelLine.col3}"/>
                        </f:facet>
                        <h:outputText value="#{cell.col3}"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="#{salesFiguireManagerBean.labelLine.col4}"/>
                        </f:facet>
                        <h:outputText value="#{cell.col4}"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="#{salesFiguireManagerBean.labelLine.col5}"/>
                        </f:facet>
                        <h:outputText value="#{cell.col5}"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="#{salesFiguireManagerBean.labelLine.col6}"/>
                        </f:facet>
                        <h:outputText value="#{cell.col6}"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="#{salesFiguireManagerBean.labelLine.col7}"/>
                        </f:facet>
                        <h:outputText value="#{cell.col7}"/>
                    </p:column>
                </p:dataTable>
            </h:form>
        </p:panel>

        <p:panel header="Sales Revenue for this Period" style="font-size: 85%">
            <p:tabView dynamic="true" cache="true">
                <p:tab title="Chart">
                    <p:panel header="Chart Revenue for Each Bar this Period">
                        <p:lineChart value="#{salesFiguireManagerBean.getRevenueChartFigure(salesFiguireManagerBean.selectedPeriod)}"
                                     var="sale" xfield="#{sale.month}">
                            <p:chartSeries label="Bar A" value="#{sale.salesRevPerMon1}"/>
                            <p:chartSeries label="Bar B" value="#{sale.salesRevPerMon2}"/>
                            <p:chartSeries label="Bar C" value="#{sale.salesRevPerMon3}"/>
                            <p:chartSeries label="Bar D" value="#{sale.salesRevPerMon4}"/>
                        </p:lineChart>
                    </p:panel>
                </p:tab>

                <p:tab title="Table">
                    <p:panel header="Table: Revenue for Each Bar this Period">
                        <h:form>
                            <p:dataTable var="cell" value="#{salesFiguireManagerBean.getRevenueFigures(salesFiguireManagerBean.selectedPeriod)}">
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="#{salesFiguireManagerBean.labelLine.col1}"/>
                                    </f:facet>
                                    <h:outputText value="#{cell.col1}"/>
                                </p:column>

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="#{salesFiguireManagerBean.labelLine.col2}"/>
                                    </f:facet>
                                    <h:outputText value="#{cell.col2}"/>
                                </p:column>

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="#{salesFiguireManagerBean.labelLine.col3}"/>
                                    </f:facet>
                                    <h:outputText value="#{cell.col3}"/>
                                </p:column>

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="#{salesFiguireManagerBean.labelLine.col4}"/>
                                    </f:facet>
                                    <h:outputText value="#{cell.col4}"/>
                                </p:column>

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="#{salesFiguireManagerBean.labelLine.col5}"/>
                                    </f:facet>
                                    <h:outputText value="#{cell.col5}"/>
                                </p:column>

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="#{salesFiguireManagerBean.labelLine.col6}"/>
                                    </f:facet>
                                    <h:outputText value="#{cell.col6}"/>
                                </p:column>

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="#{salesFiguireManagerBean.labelLine.col7}"/>
                                    </f:facet>
                                    <h:outputText value="#{cell.col7}"/>
                                </p:column>
                            </p:dataTable>
                        </h:form>
                    </p:panel>
                </p:tab>
            </p:tabView>
        </p:panel>

        <p:panel header="Sales Revenue for Each Year" style="font-size: 85%">
            <p:tabView dynamic="true" cache="true">
                <p:tab title="Compared By Product">
                    <p:panel header="Revenue for Each Bar Per Year">
                        <p:barChart value="#{salesFiguireManagerBean.getRevenueYearFigure(salesFiguireManagerBean.selectedPeriod)}"
                                    var="sale" yfield="#{sale.year}">
                            <p:chartSeries label="Bar A" value="#{sale.qa}"/>
                            <p:chartSeries label="Bar B" value="#{sale.qb}"/>
                            <p:chartSeries label="Bar C" value="#{sale.qc}"/>
                            <p:chartSeries label="Bar D" value="#{sale.qd}"/>
                        </p:barChart>
                    </p:panel>
                </p:tab>

                <p:tab title="Aggregate">
                    <p:panel header="Revenue for Each Bar">
                        <p:stackedBarChart  value="#{salesFiguireManagerBean.getRevenueYearFigure(salesFiguireManagerBean.selectedPeriod)}"
                                    var="sale" yfield="#{sale.year}">
                            <p:chartSeries label="Bar A" value="#{sale.qa}"/>
                            <p:chartSeries label="Bar B" value="#{sale.qb}"/>
                            <p:chartSeries label="Bar C" value="#{sale.qc}"/>
                            <p:chartSeries label="Bar D" value="#{sale.qd}"/>
                        </p:stackedBarChart>
                    </p:panel>
                </p:tab>
            </p:tabView>
            <br/>
            <br/>
            <br/>
            
        </p:panel>
        <br/>
        <br/>
        <br/>

    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>
